<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp"%>
<!-- 分页显示演示开始 -->
<style>
<!--
.tab {
	margin-bottom: 0px;
	margin-top: 6px;
}

.tab>li>a {
	line-height: 22px;
	padding-bottom: 2px;
	padding-top: 2px;
}

.tab-content {
	border: 1px solid #E3E3E3;
	border-radius: 0px 0px 4px 4px;
	border-top: none;
	padding: 2px;
}

.table [valign="top"] {
	vertical-align: top;
}

#single div[id^=m] {
	background-color: #FFFFFF;
	border: 1px solid #E3E3E3;
	border-radius: 4px;
	margin: 2px;
	padding: 2px;
	line-height: 25px;
	float: left;
	width: 45%;
	min-height: 225px;
}

#mNoGoods {
	max-height: 225px;
	display: block;
	overflow-y: auto;
}

#single div[id^=m] span {
	float: left;
}

.title {
	width: 60px;
	margin-left: 20px;
}

#memo {
	width: 99%;
}

tr td:FIRST-CHILD {
	text-align: right;
}

#goodsQr {
	min-height: 40px;
	width: 80%;
}

#qrCodeList {
	background-color: #FFFFFF;
	border: 1px solid #E3E3E3;
	border-radius: 4px;
	min-height: 400px;
	margin: 2px;
	padding: 15px;
	max-height: 600px;
	overflow-y: auto;
}

div[name=box] {
	border: 1px solid;
	color: blue;
	padding: 15px;
	border-radius: 4px 4px 4px 4px;
}
-->
</style>
<ul class="nav nav-tabs tab tBlock">
	<li class="active">
		<a deny="not" class="nFocus" href="#step" data-toggle="tab">
			<i class="icon-tags"></i>
			入库管理
		</a>
	</li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="step">
		<form id="inputForm" class="form-inline" action="${ctx}/adoms/goods/inStock" method="post">
			<table id="step1" style="width: 80%; margin: auto;" class="table table-striped table-bordered table-condensed">
				<tr>
					<td class="span2">入库单编号:</td>
					<td>
						<input readonly="readonly" type="text" id="batchCode" name="batchCode">
					</td>
				</tr>
				<tr>
					<td class="span2">请选择商品:</td>
					<td>
						<select id="marchandise" name="marchandise.id" style="width: auto;">
							<c:forEach items="${mList }" var="m" varStatus="index">
								<option value="${m.id }">${index.index + 1}.${m.name }</option>
							</c:forEach>
						</select>
					</td>
				</tr>
				<tr>
					<td class="span2" valign="top">商品详情:</td>
					<td>
						<c:forEach items="${mList }" var="m" varStatus="index">
							<div class="hide" id="m${m.id }">
								<table class="table-bordered" style="width: 100%; background-color: #FFFFFF;">
									<tr>
										<td class="span2">商品名称：</td>
										<td>${index.index + 1}. ${m.name }</td>
									</tr>
									<tr>
										<td>商品编号：</td>
										<td>${m.code }</td>
									</tr>
									<tr>
										<td>单价：</td>
										<td>
											<span class="tBlue">
												<span>${m.price }</span>
												元
											</span>
										</td>
									</tr>
									<tr>
										<td>商品条码：</td>
										<td>${m.barCode }</td>
									</tr>
									<tr>
										<td>品牌：</td>
										<td>${m.brand.name }</td>
									</tr>
									<tr>
										<td>产地：</td>
										<td>${m.producePlace }</td>
									</tr>
									<tr>
										<td>保质期：</td>
										<td>${m.shelflife }月</td>
									</tr>
									<tr>
										<td>商品描述：</td>
										<td>${m.description }</td>
									</tr>
									<tr>
										<td>规格：</td>
										<td name="spcification">${m.spcification }</td>
									</tr>
									<tr>
										<td>包装：</td>
										<td id="mPackageing" to="#inputPackage">${m.packageing }</td>
									</tr>
									<tr>
										<td>每件数量：</td>
										<td>
											${m.numOfBox } ${m.packageing }
											<input type="hidden" name="mNumOfBox" value="${m.numOfBox }" />
										</td>
									</tr>
								</table>
							</div>
						</c:forEach>
					</td>
				</tr>
				<tr>
					<td>所属部门:</td>
					<td>
						<select id="department" name="department.id">
							<option value="${USER.department.id}">${USER.department.name}</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>生产日期:</td>
					<td>
						<input id="produceDate" readonly="readonly" style="background-color: #FFFFFF; cursor: auto;" datepicker="datepicker" name="produceDate" type="text" size="30" maxlength="80" />
					</td>
				</tr>
				<tr>
					<td>录入数量:</td>
					<td>
						<input id="numOfBox" unit="#unit" type="text" name="numOfBox" value="0">
						<select id="unit" style="width: auto;">
							<option id="inputPackage"></option>
							<option>件</option>
						</select>
					</td>
				</tr>
				<tr>
					<td style="text-align: center;" colspan="2">
						<input class="btn btn-primary" type="button" id="step1Cance" value="取 消" />
						<input class="btn btn-primary" type="button" id="step1Next" value="下一步" />
					</td>
				</tr>
			</table>
			<table id="step2" style="width: 80%; margin: auto;" class="table hide table-striped table-bordered table-condensed">
				<tr>
					<td colspan="2" style="font-size: 18px; color: blue; margin: 5px 10px;">
						<span style="float: left;">
							扫描二维码
							<span style="font-size: 12px;">
								( 录入总数
								<span id="countNumberT" class="tRed">10</span>
								<span id="countUnitT" class="tRed">件</span>
								) - 规格 -
								<span id="spcification_S"></span>
							</span>
							：
						</span>
						还剩
						<span id="countNumber" class="tRed">10</span>
						<span id="countUnit" class="tRed">件</span>
						需录入
					</td>
				</tr>
				<tr>
					<td class="span2">商品二维码:</td>
					<td>
						<input name="goodsQr" id="goodsQr" class="span6" type="text" maxlength="50" />
						<input class="btn btn-primary" type="button" id="clearInputCode" value="清空" />
					</td>
				</tr>
				<tr>
					<td valign="top">
						待入库 二维码 列表:
						<br />
						<div id="completeMessage">
							已录入数量
							<span id="counter" class="tBlue">0</span>
							<span to="#mPackageing"></span>
						</div>
					</td>
					<td>
						<div id="qrCodeList"></div>
					</td>
				</tr>
				<tr>
					<td style="text-align: center;" colspan="2">
						<input class="btn btn-primary" type="button" id="step2Previous" value="上一步" />
						<input class="btn btn-primary" type="button" id="step2Clear" value="重新录入" />
						<input class="btn btn-primary" type="button" id="step2Next" value="下一步" />
					</td>
				</tr>
			</table>
			<table id="step3" style="width: 80%; margin: auto;" class="table hide table-striped table-bordered table-condensed">
				<tr>
					<td align="center" style="text-align: center;">
						<h3>录入完成</h3>
					</td>
				</tr>
				<tr>
					<td id="finishedMessageBox" style="text-align: center; padding: 30px; font-size: 18px; color: blue; margin: 5px 10px;">已成功入库XXXXXX商品，一共XXXX，生产日期是XXXXXX</td>
				</tr>
				<tr>
					<td style="text-align: center;">
						<a href="${ctx }/adoms/goods/storage" class="btn btn-primary" id="step3Done">完成</a>
					</td>
				</tr>
			</table>
		</form>
	</div>
</div>
<script>
	function init() {
		var d = new Date();
		var code = "B" + d.getTime();
		$("#batchCode").val(code);
	}
	$(function() {
		init();
		$("#inputForm").validate({
			rules : {
				"marchandise.id" : "required",
				"department.id" : "required",
				"produceDate" : "required",
				"numOfBox" : {
					required : true,
					digits : true
				}
			}
		});
		//清空输入框中的二维码
		$("#clearInputCode").click(function() {
			$("#goodsQr").val("");
		});
		$("#inputForm").submit(function() {
			return false;
		});
		$("#marchandise").change(function() {
			$("div[id^=m]:not([id^=mG])").hide();
			var mid = $(this).val();
			$("#m" + mid).show();
			$("#inputPackage").html($("[to=#inputPackage]", $("#m" + mid)).html());
		}).change();
		//第一步，点击下一步
		$("#step1Next").click(function() {
			$("#inputForm").submit();
			if ($('#inputForm').validate().valid()) {
				if ($("#numOfBox").val() > 0) {
					$("#step1").hide();
					$("#step2").show();
					$("#countNumber").html($("#numOfBox").val());
					$("#countUnit").html($("#unit").val());
					$("#spcification_S").html($("td[name=spcification]", $("#m" + $("#marchandise").val())).html());
					$("#countNumberT").html($("#numOfBox").val());
					$("#countUnitT").html($("#unit").val());
					$("span[to=#mPackageing]").html($("#mPackageing").html());
					$("#counter").html(0);
					$("#qrCodeList").html("");
				} else {
					msgAlert.show("录入数量必须大于0");
				}
			} else {
			}
		});
		$("#step2Next").click(
				function() {
					if (parseInt($("#countNumber").html()) > 0) {
						msgAlert.show("录入未完成！");
						return false;
					}
					$(this).attr("disabled", "disabled");
					var c = $("#inputForm").serialize();
					$.post("${ctx }/adoms/goods/storage", c, function(result) {
						if (result) {
							$("#step2").hide();
							$("#step3").show();
							$("#finishedMessageBox").html(
									"已成功入库" + $("#marchandise option:selected").text() + "商品，一共" + $("#counter").html() + $("[to=#mPackageing]").html() + "，生产日期是" + $("#produceDate").val());
						} else {
							msgAlert.show("操作异常，请联系管理员！");
						}
					}, 'json');
				});
		$("#step2Previous").click(function() {
			$("#step2").hide();
			$("#step1").show();
		});
		//全部清险滩
		$("#step2Clear").click(function() {
			$("#qrCodeList").empty();
			$("#step1Next").click();
			$("#counter").html("0");
		});
		$("#goodsQr").on("keyup", function(e) {
			var _self = $(this);
			var keyCode = e.keyCode;
			if (!keyCode || keyCode == 13) {
				var val = $.trim($(this).val());
				$("[name=box]").each(function() {
					var q = $(this).attr("value");
					if (q == val) {
						msgAlert.show("二维码：" + val + "重复！");
						$("#goodsQr").val("").focus();
						_self.val("");
						val = "";
						return false;
					}
				});
				if ($("#countNumber").html() == "0") {
					msgAlert.show("数量已经录入完成，请点击下一步保存数据！");
					return false;
				}
				if (val) {
					$.post("${ctx}/adoms/qrGoodsCode/getGoodsOrBoxByCode", {
						qrCode : val
					}, function(map) {
						var flag = "<span style='color:red;'>" + val + " - 无效</span>";
						if (map) {
							var box = $("<div name='box' value='" + val + "'><span class='close' name='boxRemove'>x</span></div>");
							if (map.box) { //显示箱码中的货物
								//判断件数中的盒数是否与现在商品的规格一致
								var mNum = $("[name=mNumOfBox]", $("#m" + $("#marchandise").val())).val();
								if (map.gList.length != mNum) {
									msgAlert.show("箱码中货物数量与入库商品的规格不符！");
									return false;
								}
								if ($("#countUnit").html() != "件") {
									if (map.gList.length > parseInt($("#countNumber").html())) {
										msgAlert.show("本件数量超过录入数量，请单个录入！");
										return false;
									}
								}
								//列出本箱中未入库的货物
								var len = 0;
								$.each(map.gList, function(i, item) {
									var isRepeat = false;
									$("input[name=qrid]").each(function() {
										var value = $(this).val();
										if (value == item.id) {
											isRepeat = true;
										}
									});
									if (isRepeat) {
										$(box).append(i + ".流水码" + " - " + item.wCode + " - " + item.state + " - 该二维码已被使用，故此作废<br/>");
									} else {
										var counter = parseInt($("#counter").html()) + 1;
										$(box).append(i + ".流水码" + " - " + item.wCode + "<input type='hidden' name='qrid' value='" + item.id + "'/> - " + item.state + "<br/>");
										$("#counter").html(counter);
										len++;
									}
								});
								$(box).prepend("箱码:" + map.box.wCode + " - 有效数量:" + len + "<input type='hidden' name='boxid' value='" + map.box.id + "'/> - " + map.box.state + " <br/>");
								//计算还剩多少数量
								if ($("#countUnit").html() == "件") {
									var n = parseInt($("#countNumber").html()) - 1;
									$("#countNumber").html(n);
								} else {
									var n = parseInt($("#countNumber").html()) - len;
									$("#countNumber").html(n);
								}
								//删除功能
								$("[name=boxRemove]", box).click(function() {
									box.remove();
									var counter = parseInt($("#counter").html()) - len;
									$("#counter").html(counter);
									//计算还剩多少数量
									if ($("#countUnit").html() == "件") {
										var n = parseInt($("#countNumber").html()) + 1;
										$("#countNumber").html(n);
									} else {
										var n = parseInt($("#countNumber").html()) + len;
										$("#countNumber").html(n);
									}
								});
							} else { //显示只按货物二维码扫描的货物
								if ($("#countUnit").html() == "件") {
									msgAlert.show("当前是以件为单位录入，请按件扫描货物！");
									return false;
								}
								var goods = map.goods;
								if (goods) {
									var isRepeat = false;
									$("input[name=qrid]").each(function() {
										var value = $(this).val();
										if (value == goods.id) {
											isRepeat = true;
										}
									});
									if (isRepeat) {
										flag = "流水码." + goods.wCode + " - " + goods.state + " - 该二维码已被使用，故此作废<br/>";
									} else {
										var counter = parseInt($("#counter").html()) + 1;
										flag = "流水码." + goods.wCode + "<input type='hidden' name='qrid' value='" + goods.id + "'/> - " + goods.state + "<br/>";
										$("#counter").html(counter);
										$("[name=boxRemove]", box).click(function() {
											box.remove();
											var counter = parseInt($("#counter").html()) - 1;
											$("#counter").html(counter);
											//计算还剩多少数量
											if ($("#countUnit").html() == "件") {
												var n = parseInt($("#countNumber").html()) + 1;
												$("#countNumber").html(n);
											} else {
												var n = parseInt($("#countNumber").html()) + 1;
												$("#countNumber").html(n);
											}
										});
										//计算还剩多少数量
										if ($("#countUnit").html() != "件") {
											var n = parseInt($("#countNumber").html()) - 1;
											$("#countNumber").html(n);
										}
									}
									$(box).append(flag);
								}
							}
							$("#qrCodeList").prepend(box);
							flag = "";
						}
						if (flag != "") {
							$("#qrCodeList").prepend(flag + "<br/>");
						}
						$("#goodsQr").val("").focus();
					}, "json");
				}
			}
		});
	});
</script>
<c:if test="${msg != null}">
	<script>
		msgAlert.show("${msg}");
	</script>
</c:if>
<!-- 
var c = $("#inputForm").serialize();
alert(c);
 -->